<template>
  <div class="dashboard-container">

    <!--header栏-->
    <div class="dashboard-header">
      <span class="header-title">蓝聘系统后台</span>
      <svg class="icon header-icon" aria-hidden="true">
        <use xlink:href="#icon-rili"></use>
      </svg>
      <span class="date-value">{{dayValue}}</span>
      <div class="header-right">
        <svg class="icon header-icon2" aria-hidden="true">
          <use xlink:href="#icon-fangwenliang"></use>
        </svg>
        <span class="visit-times">今日系统访问量：{{dayVisitorNum}}次</span>

        <div class="look-visit-detail" @click="openDataPage('/visitor-data')">
          <svg class="icon eye-icon" aria-hidden="true">
            <use xlink:href="#icon-chakan"></use>
          </svg>
          <span class="look-visit-btn">查看系统访问数据详情</span>
        </div>
      </div>
    </div>

    <div class="dashboard-index-box">

      <!--系统数据-->
      <el-row :gutter="20">
        <!--系统注册数据-->
        <el-col :xs="24" :sm="24" :lg="11">
          <div class="register-data">
            <div class="register-title">
              <span class="register-title-text">系统注册数据</span>
              <div class="register-title-detail" @click="openDataPage('/register-data')">
                <svg class="icon eye-icon" aria-hidden="true">
                  <use xlink:href="#icon-chakan"></use>
                </svg>
                <span class="register-title-btn">查看详情</span>
              </div>
            </div>

            <div class="user-data">
              <div class="user-data-title">
                <span>新增</span><span>用户</span>
              </div>

              <div class="day-content">
                <div class="day-data">
                  <span class="day-data-title">今日新增</span>
                  <span class="day-data-line"></span>
                  <span class="day-data-num">{{dayRegisterNum}}人</span>
                </div>
              </div>
              <div class="day-content">
                <div class="day-data green-color">
                  <span class="day-data-title">本周新增</span>
                  <span class="day-data-line"></span>
                  <span class="day-data-num">{{weekRegisterNum}}人</span>
                </div>
              </div>
              <div class="day-content">
                <div class="day-data green-color2">
                  <span class="day-data-title">本月新增</span>
                  <span class="day-data-line"></span>
                  <span class="day-data-num">{{monthRegisterNum}}人</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!--系统招工数据-->
        <el-col :xs="24" :sm="24" :lg="13">
          <div class="work-data">
            <el-row class="work-data-title">系统招工数据</el-row>
            <el-row class="work-data-wrap">
              <el-col :xs="24" :sm="24" :lg="8" class="work-data-content">
                <div class="work-data-content-title">
                  <span class="day-ch">今日</span><span class="day-en">DAY</span>
                </div>
                <div class="work-data-content-num">
                  <span class="day-apply">报名人数</span><span class="day-num">{{dayApplyNum}}人</span>
                </div>
                <div class="work-data-content-num">
                  <span class="day-apply">入职人数</span><span class="day-num">{{dayEntryNum}}人</span>
                </div>
              </el-col>

              <el-col :xs="24" :sm="24" :lg="8" class="work-data-content">
                <div class="work-data-content-title week-color">
                  <span class="day-ch">本周</span><span class="day-en">WEEk</span>
                </div>
                <div class="work-data-content-num">
                  <span class="day-apply">报名人数</span><span class="day-num day-num-color">{{weekApplyNum}}人</span>
                </div>
                <div class="work-data-content-num">
                  <span class="day-apply">入职人数</span><span class="day-num day-num-color">{{weekEntryNum}}人</span>
                </div>
              </el-col>

              <el-col :xs="24" :sm="24" :lg="8" class="work-data-content">
                <div class="work-data-content-title month-color">
                  <span class="day-ch">本月</span><span class="day-en">MONTH</span>
                </div>
                <div class="work-data-content-num">
                  <span class="day-apply">报名人数</span><span class="day-num month-num-color">{{monthApplyNum}}人</span>
                </div>
                <div class="work-data-content-num">
                  <span class="day-apply">入职人数</span><span class="day-num month-num-color">{{monthEntryNum}}人</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!--财务数据-->
      <el-row>
        <div class="finance-data">
          <el-row class="register-title">
            <span class="register-title-text">系统财务数据</span>
            <span class="finance-day-data">仅今日数据</span>
            <div class="register-title-detail" @click="openDataPage('/finance-data')" v-if="financeRole">
              <svg class="icon eye-icon" aria-hidden="true">
                <use xlink:href="#icon-chakan"></use>
              </svg>
              <span class="register-title-btn">查看详情</span>
            </div>
          </el-row>

          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="6">
              <div class="finance-data-content">
                <div class="finance-data-content-detail">
                  <span class="finance-data-content-title">提现</span>
                  <span class="finance-data-content-num">共{{withDrawPen}}笔</span>
                </div>
                <div class="finance-line"></div>
                <div class="finance-money">
                  <count-to :start-val="0" :end-val="withDrawMoney" :duration="2000" class="finance-money-num"
                            :decimals="2" v-if="financeRole"/>
                  <span v-else class="finance-money-num finance-money-start">***</span>
                  <span class="finance-money-cell">元</span>
                  <img src="../../../static/icon01.png" class="finance-money-pic"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6">
              <div class="finance-data-content type-color1">
                <div class="finance-data-content-detail">
                  <span class="finance-data-content-title">借支</span>
                  <span class="finance-data-content-num">共{{lendPen}}笔</span>
                </div>
                <div class="finance-line"></div>
                <div class="finance-money">
                  <count-to :start-val="0" :end-val="lendMoney" :duration="2000" class="finance-money-num" :decimals="2"
                            v-if="financeRole"/>
                  <span v-else class="finance-money-num finance-money-start">***</span>
                  <span class="finance-money-cell">元</span>
                  <img src="../../../static/icon02.png" class="finance-money-pic"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6">
              <div class="finance-data-content type-color2">
                <div class="finance-data-content-detail">
                  <span class="finance-data-content-title">平台奖励</span>
                  <span class="finance-data-content-num">共{{platPen}}笔</span>
                </div>
                <div class="finance-line"></div>
                <div class="finance-money">
                  <count-to :start-val="0" :end-val="platMoney" :duration="2000" class="finance-money-num" :decimals="2"
                            v-if="financeRole"/>
                  <span v-else class="finance-money-num finance-money-start">***</span>
                  <span class="finance-money-cell">元</span>
                  <img src="../../../static/icon03.png" class="finance-money-pic"/>
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6">
              <div class="finance-data-content type-color3">
                <div class="finance-data-content-detail">
                  <span class="finance-data-content-title">导入工资</span>
                  <span class="finance-data-content-num">共{{importPen}}笔</span>
                </div>
                <div class="finance-line"></div>
                <div class="finance-money">
                  <count-to :start-val="0" :end-val="importMoney" :duration="2000" class="finance-money-num"
                            :decimals="2" v-if="financeRole"/>
                  <span v-else class="finance-money-num finance-money-start">***</span>
                  <span class="finance-money-cell">元</span>
                  <img src="../../../static/icon04.png" class="finance-money-pic"/>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
  import CountTo from 'vue-count-to';
  import {mapGetters} from 'vuex';
  import {formatDate} from "@/utils/index";
  import {getInitDashData} from "../../api/user/user";

  export default {
    name: 'dashboard',
    components: {
      CountTo
    },
    computed: {
      ...mapGetters([
        'roles'
      ]),
      dayValue() {
        return formatDate(new Date(), 'yyyy年MM月dd日');
      }
    },
    data() {
      return {
        dayVisitorNum: 0,
        dayRegisterNum: 0,
        weekRegisterNum: 0,
        monthRegisterNum: 0,
        dayApplyNum: 0,
        dayEntryNum: 0,
        weekApplyNum: 0,
        weekEntryNum: 0,
        monthApplyNum: 0,
        monthEntryNum: 0,
        withDrawMoney: 0,
        lendMoney: 0,
        platMoney: 0,
        importMoney: 0,
        withDrawPen: 0,
        lendPen: 0,
        platPen: 0,
        importPen: 0,
        financeRole: false,
      }
    },
    created() {
      this.getDashData();
      if (this.roles.length > 0) {
        this.financeRole = this.roles.includes('financeData');
      }
    },
    methods: {
      openDataPage(page) {
        this.$router.push(page);
      },
      getDashData() {//获取首页数据
        getInitDashData().then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            const {pvNum, registerNum, workNum, moneyNum} = retObj.data;
            this.dayVisitorNum = pvNum[0].num;//今日访问量
            for (let obj  of registerNum) {//注册数据
              if (obj.type == 1) {
                this.dayRegisterNum = obj.num;
              } else if (obj.type == 2) {
                this.weekRegisterNum = obj.num;
              } else {
                this.monthRegisterNum = obj.num;
              }
            }

            for (let work of workNum) {//招工数据(1今日报名 2今日入职 3 本周报名 4本周入职 5本月报名 6本月入职)
              if (work.type == 1) {
                this.dayApplyNum = work.num;
              } else if (work.type == 2) {
                this.dayEntryNum = work.num;
              } else if (work.type == 3) {
                this.weekApplyNum = work.num;
              } else if (work.type == 4) {
                this.weekEntryNum = work.num;
              } else if (work.type == 5) {
                this.monthApplyNum = work.num;
              } else if (work.type == 6) {
                this.monthEntryNum = work.num;
              }
            }

            if (this.financeRole) {
              for (let finance of moneyNum) {//财务数据(//1提现 2借支 3平台奖励 4导入工资)
                if (finance.type == 1) {
                  this.withDrawMoney = finance.money;
                  this.withDrawPen = finance.num;
                } else if (finance.type == 2) {
                  this.lendMoney = finance.money;
                  this.lendPen = finance.num;
                } else if (finance.type == 3) {
                  this.platMoney = finance.money;
                  this.platPen = finance.num;
                } else if (finance.type == 4) {
                  this.importMoney = finance.money;
                  this.importPen = finance.num;
                }
              }
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-container {
    background: #F0F2F5;
    padding-bottom: 50px;
    .dashboard-header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      background: #fff;
      border-bottom: 1px solid #d8dce6;
      .header-title {
        min-width: 160px;
        padding-left: 20px;
        padding-right: 22px;
        font-size: 18px;
        font-weight: bold;
        color: rgba(61, 68, 77, 1);
      }
      .header-icon {
        width: 12px;
        height: 12px;
      }
      .header-icon2 {
        width: 16px;
        height: 16px;
      }
      .date-value {
        margin-left: 5px;
        font-size: 14px;
        color: rgba(210, 212, 217, 1);
        min-width: 120px;
      }
      .header-right {
        display: flex;
        align-items: center;
        margin-left: auto;
        .visit-times {
          margin-left: 12px;
          font-size: 14px;
          color: rgba(120, 122, 128, 1);
          min-width: 180px;
        }
        .look-visit-detail {
          margin-left: 40px;
          margin-right: 20px;
          display: flex;
          align-items: center;
          width: 194px;
          min-width: 194px;
          height: 36px;
          background: rgba(60, 175, 255, 1);
          border: 1px solid rgba(55, 157, 230, 1);
          border-radius: 4px;
          .eye-icon {
            margin-left: 12px;
            margin-right: 6px;
            width: 18px;
            height: 12px;
          }
          .look-visit-btn {
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
          }
          &:hover {
            cursor: pointer;
            background: #59BBFF;
          }
        }
      }
    }

    .dashboard-index-box {
      padding: 20px;
      .register-data {
        height: 321px;
        background: #fff;
        margin-bottom: 20px;
        .register-title {
          display: flex;
          height: 36px;
          padding-top: 22px;
          padding-bottom: 53px;
          &-text {
            font-size: 18px;
            font-weight: bold;
            color: rgba(61, 68, 77, 1);
            padding-left: 24px;
            min-width: 140px;
          }
          &-detail {
            display: flex;
            align-items: center;
            width: 110px;
            height: 36px;
            background: rgba(60, 175, 255, 1);
            border: 1px solid rgba(55, 157, 230, 1);
            border-radius: 4px;
            margin-left: auto;
            margin-right: 20px;
            min-width: 110px;
            &:hover {
              cursor: pointer;
              background: #59BBFF;
            }
            .eye-icon {
              margin-left: 12px;
              margin-right: 6px;
              width: 18px;
              height: 12px;
            }
          }
          &-btn {
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
          }
        }
        .user-data {
          display: flex;
          align-items: center;
          padding-top: 30px;
          &-title {
            display: flex;
            flex-direction: column;
            width: 136px;
            height: 140px;
            border-right: 1px solid #D8DCE5;
            align-items: center;
            justify-content: center;
            span {
              font-size: 24px;
              color: rgba(210, 212, 217, 1);
            }
          }
          .day-content {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 148px;
            height: 148px;
            background: rgba(255, 255, 255, 1);
            border: 2px solid rgba(60, 175, 255, 0.4);
            border-radius: 50%;
            &:nth-child(2) {
              margin-left: 40px;
            }
            &:nth-child(3) {
              margin-left: 25px;
              margin-right: 25px;
              border: 2px solid rgba(8, 204, 132, 0.4);
            }
            &:nth-child(4) {
              border: 2px solid rgba(30, 215, 222, 0.4);
            }
            .day-data {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 132px;
              height: 132px;
              background: rgba(60, 175, 255, 1);
              border-radius: 50%;
              &-title {
                font-size: 14px;
                color: rgba(255, 255, 255, 1);
              }
              &-line {
                margin-top: 15px;
                margin-bottom: 15px;
                width: 107px;
                height: 1px;
                background: rgba(255, 255, 255, 1);
                opacity: 0.39;
              }
              &-num {
                font-size: 24px;
                font-weight: bold;
                color: rgba(255, 255, 255, 1);
              }
            }
            .green-color {
              background: #08CC84;
            }
            .green-color2 {
              background: #1ED7DE;
            }
          }
          @media screen and (min-width: 1440px) and(max-width: 1600px) {
            .day-content {
              width: 132px;
              height: 132px;
              &:nth-child(2) {
                margin-left: 16px;
              }
              &:nth-child(3) {
                margin-left: 16px;
                margin-right: 16px;
              }
              .day-data{
                width: 120px;
                height: 120px;
              }
            }
            .user-data-title{
              width: 120px;
              height: 132px;
            }
          }
          @media screen and (min-width: 1280px) and(max-width: 1440px) {
            .day-content {
              width: 120px;
              height: 120px;
              &:nth-child(2) {
                margin-left: 12px;
              }
              &:nth-child(3) {
                margin-left: 12px;
                margin-right: 12px;
              }
              &:nth-child(4) {
                margin-right: 12px;
              }
              .day-data{
                width: 104px;
                height: 104px;
              }
            }
            .user-data-title{
              width: 104px;
              height: 124px;
            }
          }
          @media screen and (min-width: 960px) and(max-width: 1280px) {
            .day-content {
              width: 148px;
              height: 148px;
              &:nth-child(2) {
                margin-left: 20px;
              }
              &:nth-child(3) {
                margin-left: 20px;
                margin-right: 20px;
              }
              .day-data{
                width: 132px;
                height: 132px;
              }
            }
            .user-data-title{
              width: 136px;
              height: 140px;
            }
          }
        }
      }
      .work-data {
        height: 321px;
        background: #fff;
        margin-bottom: 20px;
        &-wrap {
          display: flex;
        }
        &-title {
          padding-top: 34px;
          padding-bottom: 40px;
          padding-left: 24px;
          font-size: 18px;
          font-weight: bold;
          color: rgba(61, 68, 77, 1);
        }
        &-content {
          height: 168px;
          background: rgba(240, 246, 250, 1);
          border-radius: 4px;
          margin-left: 24px;
          &:nth-child(2) {
            background: #FAF5E6;
          }
          &:last-child {
            margin-right: 24px;
          }
          &-title {
            display: flex;
            height: 60px;
            background: rgba(60, 175, 255, 1);
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            margin-bottom: 35px;
            .day-ch {
              margin-top: 23px;
              padding-left: 17px;
              font-size: 18px;
              font-weight: bold;
              color: rgba(255, 255, 255, 1);
            }
            .day-en {
              margin-top: 30px;
              margin-left: 12px;
              font-size: 14px;
              color: rgba(255, 255, 255, 1);
            }
          }
          .week-color {
            background: rgba(255, 203, 61, 1);
          }
          .month-color {
            background: rgba(30, 215, 222, 1);
          }
          &-num {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            height: 20px;
            &:last-child {
              margin-bottom: 0px;
            }
            .day-apply {
              margin-left: 18px;
              font-size: 14px;
              color: rgba(120, 122, 128, 1);
              &:nth-child(2) {

              }
            }
            .day-num {
              margin-left: auto;
              font-size: 20px;
              color: rgba(60, 175, 255, 1);
              margin-right: 18px;
              &-color {
                color: #EBB523;
              }
            }
            .month-num-color {
              color: #1ED7DE;
            }
          }
        }
      }
      .finance-data {
        background: #fff;
        padding: 20px;
        .register-title {
          display: flex;
          align-items: center;
          height: 36px;
          padding-top: 30px;
          padding-bottom: 48px;
          &-text {
            font-size: 18px;
            font-weight: bold;
            color: rgba(61, 68, 77, 1);
          }
          .finance-day-data {
            padding-left: 20px;
            font-size: 14px;
            color: rgba(210, 212, 217, 1);
          }
          &-detail {
            display: flex;
            align-items: center;
            width: 110px;
            height: 36px;
            background: rgba(60, 175, 255, 1);
            border: 1px solid rgba(55, 157, 230, 1);
            border-radius: 4px;
            margin-left: auto;
            min-width: 110px;
            &:hover {
              cursor: pointer;
              background: #59BBFF;
            }
            .eye-icon {
              margin-left: 12px;
              margin-right: 6px;
              width: 18px;
              height: 12px;
            }
          }
          &-btn {
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
          }
        }
        .finance-data-content {
          height: 224px;
          background: rgba(60, 175, 255, 1);
          border-radius: 6px;
          margin-bottom: 20px;
          &-detail {
            display: flex;
            height: 26px;
            align-items: flex-end;
            padding-top: 40px;
            padding-bottom: 24px;
          }
          &-title {
            margin-left: 24px;
            font-size: 26px;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
          }
          &-num {
            margin-right: 24px;
            margin-left: auto;
            font-size: 18px;
            color: rgba(255, 255, 255, 1);
          }
          .finance-line {
            margin-left: 24px;
            margin-right: 24px;
            height: 1px;
            background: rgba(255, 255, 255, 0.37);
            border-radius: 1px;
          }
          .finance-money {
            display: flex;
            align-items: center;
            margin-left: 24px;
            margin-right: 24px;
            margin-top: 24px;
            height: 100px;
            color: rgba(255, 255, 255, 1);
            &-num {
              font-size: 36px;
              font-weight: bold;
            }
            &-start {
              padding-top: 18px;
            }
            &-cell {
              padding-left: 5px;
              padding-top: 10px;
              font-size: 16px;
            }
            &-pic {
              margin-left: auto;
              width: 100px;
              height: 100px;
              border-radius: 6px;
            }
          }
        }
        .type-color1 {
          background: #FFCB3D;
        }
        .type-color2 {
          background: #08CC84;
        }
        .type-color3 {
          background: #1ED7DE;
        }
      }
    }
  }
</style>
